<template>
  <tm-app>
    <tm-navbar title="海报分享" :followTheme="true" :hideHome="true">
    </tm-navbar>
    <tm-sheet
      :round="4"
      :padding="[20]"
      :transprent="true"
      :margin="[20]"
      _class="flex flex-col flex-col-center-center relative  mt-n10"
    >
      <tm-spin :load="state.load" tip="海报生成中...">
        <tm-sheet
          :margin="[0, 0]"
          :padding="[0, 0]"
          _style="min-height:300px;min-width:300px"
        >
          <l-painter ref="poster">
            <l-painter-view>
              <l-painter-view>
                <l-painter-image
                  :src="state.posterInfo.sysValue"
                  css="width: 600rpx; height: 873rpx"
                />
              </l-painter-view>
              <l-painter-image
                :src="state.wifiInfo.wifiCodeUrl"
                css="width: 400rpx;height: 400rpx;top: 240rpx; transform: translateX(25%);position: absolute;"
              />
            </l-painter-view>
          </l-painter>
        </tm-sheet>
      </tm-spin>

      <tm-text color="#666" class="mt-n10"
        >用户扫码并成功连接WIFI产生收益</tm-text
      >
    </tm-sheet>

    <view class="flex flex-row flex-row-center-center">
      <tm-sheet
        :margin="[0]"
        :padding="[0]"
        :transprent="true"
        _class="flex flex-col flex-col-center-center"
      >
        <tm-sheet
          :round="24"
          :padding="[20]"
          :height="100"
          :width="100"
          :shadow="20"
          @click="savePoster"
          :followTheme="true"
          _class="flex flex-col flex-col-center-center"
        >
          <tm-icon name="tmicon-picture" :fontSize="50"></tm-icon>
        </tm-sheet>
        <tm-text color="#666">海报下载</tm-text>
      </tm-sheet>
      <tm-sheet
        :margin="[0]"
        :padding="[0]"
        :transprent="true"
        _class="flex flex-col flex-col-center-center"
      >
        <tm-sheet
          :round="24"
          :padding="[20]"
          :height="100"
          :width="100"
          :shadow="20"
          @click="downImage(state.wifiInfo.wifiCodeUrl)"
          :followTheme="true"
          _class="flex flex-col flex-col-center-center"
        >
          <tm-icon name="tmicon-all" :fontSize="50"></tm-icon>
        </tm-sheet>
        <tm-text color="#666">二维码下载</tm-text>
      </tm-sheet>
    </view>
    <tm-message ref="msg"></tm-message>
  </tm-app>
</template>

<script setup>
import { getWifiCodeInfoApi, getSysPosterApi } from "@/api";
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";

const msg = ref(null);
const poster = ref(null);
const state = reactive({
  wifiInfo: {},
  posterInfo: {},
  load: false,
});

onLoad(async ({ id }) => {
  state.load = true;
  getSysPosterApi().then((res) => {
    state.posterInfo = res;
  });
  state.wifiInfo = await getWifiCodeInfoApi({ wifiCodeId: id });
  setTimeout(() => {
    state.load = false;
  }, 2000);
});

const savePoster = () => {
  poster.value.canvasToTempFilePathSync({
    fileType: "jpg",
    quality: 1,
    success: (res) => {
      console.log(res);
      saveImage(res.tempFilePath);
    },
  });
};

// 保存图征
const saveImage = (fileBase) => {
  const base64 = fileBase.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
  const filePath = wx.env.USER_DATA_PATH + "/wifi_share_qrcode.png";
  const save = uni.getFileSystemManager();
  save.writeFile({
    filePath: filePath,
    data: base64,
    encoding: "base64",
    success: (res) => {
      console.log(669699, res);
      uni.saveImageToPhotosAlbum({
        filePath: filePath,
        success: function (res) {
          uni.showToast({
            title: "保存成功",
            icon: "success",
            duration: 1000,
          });
        },
        fail: function (err) {
          uni.showToast({
            title: "保存失败",
            icon: "success",
            duration: 1000,
          });
          console.log(err);
        },
      });
      console.log(res);
    },
    fail: (err) => {
      console.log(err);
    },
  });
};

const downImage = (url) => {
  uni.showToast({
    title: "保存中...",
    icon: "loading",
    duration: 1000,
  });
  uni.downloadFile({
    url,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function () {
            uni.showToast({
              title: "保存成功",
              icon: "success",
              duration: 1000,
            });
          },
          fail: function () {
            uni.showToast({
              title: "保存失败",
              icon: "error",
              duration: 1000,
            });
          },
        });
      }
    },
  });
};
</script>

<style scoped>
.wifi-img {
  width: 400rpx;
  height: 400rpx;
  top: 240rpx;
  position: absolute;
  z-index: 888;
}
</style>
